<script setup>
import { NBadge, useMessage } from 'naive-ui'
import { useRouter } from 'vue-router'
import StatusBar from "../common/StatusBar.vue"
import { useUserStore } from '@/stores'
import { getTeahProjList } from '@/api/teacher/teacher.js'
const message = useMessage()
const router = useRouter()
const curPage = ref(router.currentRoute.value.name)
const handleUpdateValue = (value) => {
  curPage.value=value
  router.push({ name: value })
}
/* 菜单栏中的标记 */
const userStore = useUserStore()
//教学项目
const markTeachingProject = ref()
const getTPMark = async() => {
  const jobNumber = userStore.jobNumber
  const roleId = userStore.roleId
  const mark = 1
  const { data:res } = await getTeahProjList({roleId,jobNumber,mark})
  if (res.code  === 1) {
    markTeachingProject.value = res.data.total
  }
  else if(res.code === 0) {
    message.error(res.msg)
  }
}
getTPMark ()
const updateMark = (type) => {
  if(type === 'teachingProject') {
    markTeachingProject.value--
  }
}
const menuOptions=[
  {label:'教学项目',key:'teachingProject',extra: () => {
      return h(NBadge,{ value: markTeachingProject.value, offset: [60,-2] },{default: () => {}})
    }}
]
</script>

<template>
<!--  顶部导航栏-->
  <StatusBar></StatusBar>
  <n-layout has-sider style="margin-top: 1px; height: 100vh; ">
    <n-layout-sider bordered content-style="padding: 0px; " width="210" class="menuClass">
      <n-menu :value="curPage" :options="menuOptions"  @update:value="handleUpdateValue" style="font-size:17px ;letter-spacing: .1em;" />
    </n-layout-sider>
    <n-layout-content content-style="padding:  30px 20px 0 20px;overflow-y:hidden;">
      <!--绑定自定义事件-->
      <router-view @update-mark="updateMark"/>
    </n-layout-content>
  </n-layout>
</template>

<style>
.n-menu .n-menu-item-content.n-menu-item-content--selected::before {
  background-color:rgb(5,93,163);
  --n-item-color-active-hover:rgb(5,93,163);
}
.n-menu-item-content--selected > .n-menu-item-content-header {
  /* background-color: rgb(5,93,163); */
  --n-item-text-color-active: white;
  --n-item-text-color-active-hover:  white;
}
.n-menu-item-content::before {
  --n-item-color-hover: rgb(5,93,163);
  border-bottom: 1px dashed rgb(193, 217, 237);

}
.n-menu-item-content-header{
  --n-item-text-color-hover:  white;
  font-family: "Microsoft Yahei","Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
